<template>
<div>
    <t-drawer :visible="visible"
     @close="handleClose"
      :onConfirm="search"
        header='搜索想要内容'
         placement="top"
         size='180px'
         confirmBtn='搜索'>
      <div class="t-drawer-demo-div">
             <t-input label="搜索：" placeholder="请输入你想搜索的信息" v-model="searchInfo"/>
      </div>
    </t-drawer>
    <t-button class="tButton" shape="round" variant="dashed" @click="handleClick"><search-icon slot="icon"/>搜索</t-button>
  <t-table
    rowKey="id"
    :data="data"
    :columns="columns"
    :height="height"
    :onRowClick='onRowClick'
     :asyncLoading="loadingNode"
      @async-loading-click="fetchNext"
  >
  </t-table>
  </div>
</template>
<script>
import {SearchIcon } from 'tdesign-icons-vue'
import judging from '@/tool/bool'
// for (let i = 0; i < 10; i++) {
//   data.push({
//     index: i,
//     platform: i % 2 === 0 ? '共有' : '私有',
//     type: ['String', 'Number', 'Array', 'Object'][i % 4],
//     default: ['-', '0', '[]', '{}'][i % 4],
//     detail: {
//       postion: `读取 ${i} 个数据的嵌套信息值`
//     },
//     needed: i % 4 === 0 ? '是' : '否',
//     description: '数据源'
//   })
// }

const data = []
export default {
  components: {
SearchIcon
  },
  created() {
  this.fetchData()
},
  data() {
    return {
      data,
      loadingNode: 'load-more',
      index: 1,
      searchInfo: '',
     token: this.$store.state.d2admin.user.token,
     screenWidth: document.body.clientWidth,
     height: document.body.clientHeight - 150,
      visible: false,
      columns: [
        {
          align: 'center',
          width: '100',
          colKey: 'name',
          title: '姓名'
        },
        {
          width: 150,
          colKey: 'carId',
          title: '车牌'
        },
        {
           width: 150,
          colKey: 'phone',
          title: '手机号'
        },
           {
             width: 150,
          colKey: 'state',
          title: '驾驶证是否有效'
        },
        {
          colKey: 'address',
          title: '住址',
          width: 200,
          ellipsis: true
        },
        {
          width: 200,
          colKey: 'updateDate',
          title: '更新时间'
        }
      ]
    }
  },

  mounted() {

    //   挂载监听事件
 const that = this
    window.onresize = () => {
        return (() => {
             window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
  },
  methods: {
    custom() {
  return <div onClick={this.fetchNext} class="t-table__async-loading" style="color:rgb(0,82,217);cursor:pointer">加载全部</div>
},
setVisible(state) {
      this.visible = state
    },
    handleClick() {
      this.setVisible(true)
    },
    handleClose() {
      this.setVisible(false)
    },
   async search() {
    //  console.log(judging)

const INFO = judging(this.searchInfo)
if (INFO.code) {
  const resp = await fetch('/api/user/driverInfoList',{
     method: 'POST',
  headers: {
 Authorization: `Bearer${this.token}`,
     'Content-Type': 'application/json'
  },
  body: JSON.stringify(INFO.obj)
  }).then(res => res.json())
  .then(data => {
    // console.log(data.obj)
    this.data = data.obj
    this.setVisible(false)
    this.loadingNode = this.custom
      this.index = 1
  })

} else {
  this.$message.warning({
  icon: true,
  content: '未查询到相关内容'
  })
      this.setVisible(false)
}
    },
async fetchData() {
  // console.log(1)
const page = {
  page: this.index,
  amount: 15
}
// console.log(this.index)
const resp = await fetch('/api/user/driverInfoList',{
  method: 'POST',
  headers: {
 Authorization: `Bearer${this.token}`,
     'Content-Type': 'application/json'
  },
  body: JSON.stringify(page)
}).then(res => res.json()
).then(data => {
  // console.log(this.index)
  if (this.index > 1) {
  const datas = data.obj
  datas.forEach(data => {
this.data.push(data)
  // console.log(this.data)
})
  } else {
this.data = data.obj
  }

})
},
async fetchNext() {
  this.loadingNode = await 'loading'
await this.fetchData()
this.loadingNode = 'load-more'
this.index += 1
},
  onRowClick(e) {
    // console.log()

// this.$store.state.d2admin.usercar.carInfo = e.row
window.sessionStorage.userInfo = JSON.stringify(e.row)
  this.$router.push('/licensePlateIndex')
  }
  }
//   watch: {
//     screenWidth (val) {
//       // console.log(val)
//       // console.log(cloud.debounce)
//  if (!this.timer) {
//             this.screenWidth = val
//             this.timer = true
//             const that = this
//             setTimeout(function() {
//                 if (that.screenWidth >= 1020) {
// that.height = document.body.clientHeight - 150
//                 } else if (that.screenWidth >= 900) {
//                   that.height = document.body.clientHeight - 175
//                 } else {
//                   that.height = document.body.clientHeight - 220
//                 }
//                 that.timer = false
//             },200)
//         }
//     }
// }
  }

</script>
<style>
.div{
  height: 100px;
  background-color: #000;
}
.tButton{
  position: absolute;
  z-index: 100;
  right: 40px;
  top: 10px;
}
</style>